import { XmImage } from "@/components/tool";
import { XmPullRefresh } from "@/components/tool";
import { View } from "@tarojs/components";
import { Button,Textarea} from "@taroify/core";
import { observer } from "mobx-react";
import React, { Fragment, useEffect, useState } from "react";
import { XmDialogModal,XmToast } from "@/components/public";
import Navbar from "@/components/ui/navbar";
import "./index.scss"
import { BaseRouter } from "@/path/router";
import { postFeedback } from '@/path/api/setting/index'
function Index() {
  const [text,setText] = useState('')
  const submit = ()=>{
    if(text.length<10){
      XmToast.fail('必须大于10个字')
      return
    }
    postFeedback({content:text}).then(()=>{
      XmDialogModal({
        title:'反馈成功',
        renderTop:<XmImage src={'feedback-success.png'} className="feedback-dialog-img" static/>,
        hideCancelBtn:true,
        confirmText:'确定',
        content:'感谢您的反馈！我们将尽快与您联系',
      }).then(()=>{
        BaseRouter.back()
      })
    })
  }
  useEffect(()=>{

  },[])
  return <>
  <View className="feedback-nav">
    <Navbar showIcon={true} titleClassName="feedback-nav-title" title={'联系我们'} /> 
  </View>
  <XmPullRefresh className="feedback">
    <View className="feedback-box">
      <Textarea className="feedback-box-text" value={text} limit={800} onInput={(e)=>setText(e.detail.value)} placeholder="把您想说的写在这里，我们收到留言后会在第一时间为您处理~~" />
    </View>
    <Button color="primary" className="order-box-btn" block shape="round" onClick={submit}>提交</Button>
  </XmPullRefresh>
  </>
}

const Higher = React.memo(observer(Index));
export default () => <Fragment><Higher /></Fragment>
